<template>
  <div class="specialshop">
    <ul class="nav">
      <li v-for="(item, index) in list" :key="index" @click="Dj(item.id)">
        <div class="img">
          <img :src="item.pic" alt="" />
        </div>
        <p v-html="item.title" class="text-s"></p>
        <p v-html="item.descript" class="text"></p>
      </li>
    </ul>
  </div>
</template>

<script>
import { getSpecial } from "../../utils/api";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    getSpecial().then((res) => {
      this.list = res.data;
    });
  },
  methods: {
    Dj(id) {
      this.$router.push({ path: "/gotospecialdetail", query: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.specialshop {
  width: 100%;
  height: 5rem;
  overflow: auto;
  .nav {
    width: 23rem;
    display: flex;
    li {
      width: 7rem;
      margin-left: 0.1rem;
    }
    .img {
      border-radius: 1rem;
      img {
        width: 7rem;
        height: 4rem;
        border-radius: 0.3rem;
      }
    }
    .text {
      width: 7rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
